<template>
  <div class="rotor">
      <div style="width:100%; height:4rem"></div>
    <div class="turntable">
      <!-- 点击时候转动转盘 指针不转 -->
      <img
        class="turntable-center"
        :style="{transform:rotateAngle,transition:rotateTransition == ''?'transform 4s ease-in-out':rotateTransition }"
        src="http://assets.rurushishi.com/activies/bgyAct/cRotor2.png"
      >
      <img
        class="turntable-top"
        @click="pointer()"
        src="http://assets.rurushishi.com/activies/bgyAct/pointer.png"
      >
    </div>

    <div class="return" @click="ret">
      <img src="http://assets.rurushishi.com/activies/bgyAct/return.png" alt="">
    </div>
    <mobile :ouid = "receiveInfo.ouid"  :ismask ="receiveInfo.ismask" :prizeText = "receiveInfo.prizeText" v-show= "receiveInfo.ismask"></mobile>
  </div>
</template>
<script>
import request from "@/utils/request";
import axios from "axios";
import wx from "weixin-js-sdk";
import * as config from "./config";
import Cookies from "js-cookie";
import share from "@/components/common/Share";
import Bottom from "@/components/common/Bottom";
import mobile from "./components/mobile";
import {MessageBox} from "mint-ui";
import utils from "@/utils/utils";
export default {
  data() {
    return {
      luckflag: true,
      openid:Cookies.get("openid"),
      rotateAngle: 0, //将要旋转的角度
      startRotatingDegree: 0, //初始旋转角度
      rotateTransition: "", //控制过渡效果
      click_flag: true, //是否可以旋转抽奖时禁止点击
      prize: "",
      prizeId: 0,
      num: 3, //抽奖次数
      addDeg: 0, //增加度数
      prizeInfo:{
        prizeType: 1,
        flag: false
      },
      // 接收到的传播信息
      receiveSpreadInfo: {
        channel: 0, //渠道
        fuid: "", //传播者的openid
        ouid: "" //销售或渠道的openid
      },

      isJoinfos: true, //是否参加过活动
      receiveInfo: {
        ouid: '',  //销售的openid
        ismask: false,  //是否显示
        prizeText: '恭喜你获得至多200元的随机话费'   //中奖文案
      }
    };
  },
  components :{
    mobile
  },
  methods: {
    //返回首页
    ret(){
        // this.$router.push({path:"./index",query:{channel:this.channel,reOpenid:this.reOpenid}});
    },
    // 点击指针
    pointer() {
      const me = this;
      // 抽奖函数
      this.getlotteryPrizeFun();
    },
    // 转动
    rotate(prize) {
      //目前是只转动转盘
      if (!this.click_flag) return;
      var type = 0; // 默认为 0  转盘转动
      var randCircle = 4; // 附加多转几圈，2-3
      var duringTime = 5; // 默认为 5s
      var rotateAngle = "";
      switch (prize) {
        case "多功能数据线":
          rotateAngle = randCircle * 360 + 30;
          this.addDeg = rotateAngle;
          break;
        case "精美擦车卡":
          rotateAngle = randCircle * 360 + 270;
          this.addDeg = rotateAngle
          break;
        case "话费红包":
          rotateAngle = randCircle * 360 + 330;
          this.addDeg = rotateAngle
          break;
        case "广告扇":
          rotateAngle = randCircle * 360 + 210;
          this.addDeg = rotateAngle
          break;
        case "车载手机支架":
          rotateAngle = randCircle * 360 + 90;
          this.addDeg = rotateAngle
          break;
        case "妇联4电影票2张":
          rotateAngle = randCircle * 360 + 150;
          this.addDeg = rotateAngle
          break;
      }
      this.click_flag = false; // 旋转结束前，不允许再次触发
      if (type == 0) {
        // 转动盘子
        var rotateAngle =
          this.startRotatingDegree +
          rotateAngle -
          (this.startRotatingDegree % 360); //将要旋转的角度
        this.startRotatingDegree = rotateAngle; //改变初始旋转的角度
        this.rotateAngle = "rotate(" + rotateAngle + "deg)"; //真正控制转动角度
        // 旋转结束后允许再次触发
        setTimeout(() => {
          this.click_flag = true;
          this.gameOver(this.addDeg);
        }, duringTime * 1000 + 200);
      }
    },
    // 游戏结束
    gameOver(degs) {
      console.log(degs)
      // 游戏结束,重置旋转初始位置
      this.rotateAngle = "rotate(" + degs + "deg)"; //真正控制转动角度的,为0,回到初始位置
      this.rotateTransition = "transform 0s ease-in-out"; //控制转动过渡效果的
      setTimeout(() => {
        this.rotateTransition = "";
      }, 100);
      // 中奖弹窗提示
      this.prizeInfo.flag = true;
      this.winAward = true;
      // 更新抽奖次数
      this.getActcivityFancy();
    },
    // 请求活动页面数据
    getActcivityFancy() {
      const _self = this;
      _self.num --;
      if(_self.num==0){
        _self.click_flag =false;
      }
    },
    //请求点击抽奖数据,中奖操作
    getlotteryPrizeFun() {
      let _self = this;
      _self.prize = '广告扇';
      _self.rotate(_self.prize);
    },
    //分享回调 /activity/logic/share
    shareCallBack() {
      let _self = this;
      let query = {
        channel: _self.receiveSpreadInfo.channel,
        openid: _self.openid,
        prizeCode: "prize_1",
        referenceOpenid: _self.receiveSpreadInfo.fuid
      };
      let obj = JSON.stringify(query);
      request
        .post(`${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/share`, obj,{needDealEx:false})
        .then(function(data) {
          if (data.code == 0) {
            this.isshare = false;
          }
        });
    },
    init() {
      let _self = this;
      // 设置传播信息
      if (this.$route.query.channel)
        this.receiveSpreadInfo.channel = this.$route.query.channel;
      if (this.$route.query.fuid)
        this.receiveSpreadInfo.fuid = this.$route.query.fuid;
      if (this.$route.query.ouid)
        this.receiveSpreadInfo.ouid = this.$route.query.ouid;
      if (this.$route.query.isshare) _self.isshare = true;
      config.getUserInfo().then(function(userInfo) {
        console.log(userInfo);
        _self.userInfo = userInfo;
        // 设置分享 标题 链接 回调
        let shareObj = {
          title: "",
          link: ""
        };
        if (
          _self.userInfo &&
          _self.userInfo.user &&
          _self.userInfo.user.nickname
        ) {
          shareObj.title = `${
            _self.userInfo.user.nickname
          }520告白日｜怦然心动，你的“美”一刻”`;
        }
        if (_self.userInfo.salerOrAgent && _self.isJoinfos) {
          // 是销售或者渠道,更新ouid
          shareObj.link = `${config.SHARE_LINK}?channel=${
            _self.receiveSpreadInfo.channel
          }&fuid=${_self.openid}&ouid=${_self.openid}`;
        } else if (!_self.isJoinfos) {
          //没有参加活动直接分享的
          shareObj.link = `${config.SHARE_NOJOIN_LINK}?channel=${
            _self.receiveSpreadInfo.channel
          }&fuid=${_self.openid}${
            _self.receiveSpreadInfo.ouid
              ? "&ouid=" + _self.receiveSpreadInfo.ouid
              : ""
          }`;
        } else {
          shareObj.link = `${config.SHARE_LINK}?channel=${
            _self.receiveSpreadInfo.channel
          }&fuid=${_self.openid}${
            _self.receiveSpreadInfo.ouid
              ? "&ouid=" + _self.receiveSpreadInfo.ouid
              : ""
          }`;
        }
        config.initShare(shareObj);
        _self.global.SHARE_CALLBACK_OK = function(type) {
          _self.shareCallBack();
        };
      });
    }
  },
  created() {
    this.init();
  }
};
</script>
<style lang="stylus" scoped>
.rotor{
    position absolute
    top 0
    left 0 
    bottom 0
    right 0
    background url(http://assets.rurushishi.com/activies/bgyAct/draw1.jpg) no-repeat
    background-size 100% 100%
}
.turntable {
  width: 6.03rem;
  height: 6.09rem;
  position: relative;
  margin: 0 auto;
  background url(http://assets.rurushishi.com/activies/bgyAct/rotor.png) no-repeat
  background-size 100% 100%
}

.turntable .turntable-center {
  width 4.75rem
  height 4.72rem
  position: absolute;
  top: .685rem;
  left: -2.375rem;
  margin-left: 50%;
  z-index 8
}

.turntable .turntable-top {
  width 1.51rem
  height 1.86rem
  position: absolute;
  top: 2.13rem;
  left: -.755rem;
  margin-left: 50%;
  z-index 10
}
.return{
    position absolute
    bottom: 1.2rem
    right 0
    width: .81rem
}
.return>img{
    width: 100%
    height: 100%
}
</style>


